<template>
	<div>
		<el-card class="box-card" shadow="never" style="height: 140px; width: 100%;">
			<el-form :model="rawOutQO" ref="rawOutQO">
				<el-row>
					<el-col :span="6" :offset="0">
						<el-form-item label="采购单编号" prop="cgNo" label-width="150px">
							<el-input v-model="rawOutQO.cgNo" filterable clearable placeholder="请输入采购单编号"
								style="width:150px;"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6" :offset="0">
						<el-form-item label="领料单编号" prop="roNo" label-width="150px">
							<el-input v-model="rawOutQO.roNo" filterable clearable placeholder="请输入领料单编号"
								style="width:150px;"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6" :offset="0">
						<el-form-item label="状态" prop="roStatus" label-width="150px">
							<el-select v-model="rawOutQO.roStatus" filterable clearable placeholder="请选择状态"
								style="width: 150px;">
								<el-option v-for="s in status" :key="s.value" :label="s.label" :value="s.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="6" :offset="0">
						<el-form-item label="原料名称" prop="riName" label-width="150px">
							<el-input v-model="rawOutQO.riName" filterable clearable placeholder="请输入原料名称"
								style="width:150px;"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6" :offset="0">
						<el-form-item label="原料仓库" prop="riStorage" label-width="150px">
							<el-select v-model="rawOutQO.riStorage" filterable clearable placeholder="请选择"
								style="width: 150px;">
								<el-option v-for="s in allStorages" :key="s.name" :label="s.name" :value="s.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8" :offset="3">
						<el-button type="info" plain @click="select(1)">查询</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
						<el-button type="warning" plain
							@click="resetForm('rawOutQO')">重置</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
					</el-col>
				</el-row>
			</el-form>
		</el-card></br>

		<el-card class="box-card" shadow="never" style="height: 420px; width: 100%;">
			<el-table :data="currentRawOuts" border>
				<el-table-column type="index"></el-table-column>
				<el-table-column prop="roNo" label="领料单编号" align="center"></el-table-column>
				<el-table-column prop="riName" label="原料名称" align="center"></el-table-column>
				<el-table-column prop="riStorage" label="原料仓库" align="center"></el-table-column>
				<el-table-column prop="cgGname" label="商品名称" align="center"></el-table-column>
				<el-table-column prop="roNum" label="领料数量" align="center"></el-table-column>
				<el-table-column prop="cgNo" label="采购单编号" align="center"></el-table-column>
				<el-table-column prop="roIn" label="领取时间" align="center"></el-table-column>
				<el-table-column prop="roEnd" label="更新时间" align="center"></el-table-column>
				<el-table-column prop="roStatus" label="领料单状态" align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.roStatus == 1">待入库</span>
						<span v-if="scope.row.roStatus == 2">待审核</span>
						<span v-if="scope.row.roStatus == 3">已完成</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-row v-if="scope.row.roStatus == 1">
							<el-button type="primary" plain @click="edit(scope)">成品入库</el-button>
						</el-row>
						<el-row v-if="scope.row.roStatus == 2">
							<el-button type="success" plain>待审核</el-button>
						</el-row>
						<el-row v-if="scope.row.roStatus == 3">
							<el-button type="warning" plain>已完成</el-button>
						</el-row>
					</template>
				</el-table-column>
			</el-table></br>
			<el-pagination background layout="prev, pager, next" :current-page.sync="currentPage"
				:page-count="totalPage" @current-change="goPage">
			</el-pagination>
		</el-card>

		<el-dialog title="成品入库" :visible.sync="dialogProdu">
			<el-form :model="addChengPin" ref="addChengPin">
				<el-row>
					<el-col :span="10" :offset="0">
						<el-form-item label="采购单号" prop="cgNo" label-width="80px">
							<el-input v-model="addChengPin.cgNo" disabled filterable clearable
								placeholder="请输入领料单号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset="1">
						<el-form-item label="领料单号" prop="roNo" label-width="80px">
							<el-input v-model="addChengPin.roNo" disabled filterable clearable
								placeholder="请输入领料单号"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset="0">
						<el-form-item label="原料名称" prop="riName" label-width="80px">
							<el-input v-model="addChengPin.riName" disabled filterable clearable
								placeholder="请输入原料名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset="1">
						<el-form-item label="商品名称" prop="cgGname" label-width="80px">
							<el-select v-model="addChengPin.cgGname" disabled filterable clearable
								placeholder="请选择商品名称">
								<el-option v-for="g in allGoods" :key="g.name" :label="g.name" :value="g.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset="0">
						<el-form-item label="领料数量" prop="roNum" label-width="80px">
							<el-input-number v-model="addChengPin.roNum" :disabled="true"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset="1">
						<el-form-item label="成品仓库" prop="proStorage" label-width="80px">
							<el-select v-model="addChengPin.proStorage" filterable clearable placeholder="请选择仓库">
								<el-option v-for="s in allStorages" :key="s.name" :label="s.name" :value="s.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset="0">
						<el-form-item label="成品数量" prop="proNum" label-width="80px">
							<el-input-number v-model="addChengPin.proNum" :min="0" :max="addChengPin.roNum" :step="10"
								step-strictly></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset="1">
						<el-form-item label="商品单位" prop="proUname" label-width="80px">
							<el-select v-model="addChengPin.proUname" filterable clearable placeholder="请选择商品单位">
								<el-option v-for="u in allUnits" :key="u.name" :label="u.name" :value="u.name">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogProdu=false">取 消</el-button>
				<el-button type="primary" @click="addProdu">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import axios from "axios"
	export default {
		name: "lingliao",
		data() {
			return {
				// allGoods: [],
				// allUnits：[],
				// allSuppliers: [],
				// allStorages: [],

				rawOutQO: {},
				currentRawOuts: [],

				dialogAdd: false,
				dialogUpdate: false,
				dialogProdu: false,

				addChengPin: {},

				status: [{
					value: '1',
					label: '待入库'
				}, {
					value: '2',
					label: '待审核'
				}, {
					value: '3',
					label: '已完成'
				}],

				totalPage: 0,
				currentPage: 0,

				allGoods: [{
					name: '无籽蜜桔'
				}, {
					name: '武鸣沃柑'
				}, {
					name: '红富士苹果'
				}, {
					name: '新鲜牛排肉'
				}, {
					name: '新鲜五花肉'
				}, {
					name: '优质猪瘦肉'
				}, {
					name: '海鸭咸鸭蛋'
				}],
				allUnits: [{
					name: '千克'
				}, {
					name: '克'
				}, {
					name: '斤'
				}, {
					name: '个'
				}],
				allSuppliers: [{
					name: '沂蒙果蔬种植合作社'
				}, {
					name: '宏进冰鲜猪副产品批发'
				}, {
					name: '惠盈食用农产品经营部'
				}],
				allStorages: [{
					name: '成都生鲜仓库'
				}, {
					name: '上海生鲜仓库'
				}, {
					name: '武汉生鲜仓库'
				}],
			}
		},
		methods: {
			addProdu() {
				axios.post("/lingliaoAPI/lingliao/proIn", this.addChengPin)
					.then(res => {
						if (res.data.code == 200) {
							this.dialogProdu = false;
							this.goPage(this.currentPage);
							// this.getAll();
							this.$message({
								type: 'success',
								message: '入库成功!'
							});
						};
						this.resetForm('addChengPin');
					});
			},
			edit(scope) {
				this.dialogProdu = true;
				//数据回显
				this.addChengPin = {
					...scope.row
				}
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			select(p) {
				axios.get("/lingliaoAPI/lingliao/list/" + p, {
					params: this.rawOutQO
				}).then(res => {
					if (res.data.code == 200) {
						this.currentRawOuts = res.data.data.list;
						this.totalPage = res.data.data.pages;
						this.currentPage = 1;
						this.$message({
							type: 'success',
							message: '查询成功!'
						});
					}
				})
			},
			goPage(p) {
				axios.get("/lingliaoAPI/lingliao/list/" + p, {
					params: this.rawOutQO
				}).then(res => {
					if (res.data.code == 200) {
						this.currentRawOuts = res.data.data.list;
						this.totalPage = res.data.data.pages;
					}
				})
			},
			getAll() {
				//获取所有商品信息
				axios.get("/").then(res => {
					if (res.data.code == 200) {
						this.allGoods = res.data.data;
					}
				})
				//获取所有单位信息
				axios.get("/").then(res => {
					if (res.data.code == 200) {
						this.allUnits = res.data.data;
					}
				})
				//获取所有供应商信息
				axios.get("/").then(res => {
					if (res.data.code == 200) {
						this.allSuppliers = res.data.data;
					}
				})
				//获取所有仓库信息
				axios.get("/").then(res => {
					if (res.data.code == 200) {
						this.allStorages = res.data.data;
					}
				})
			}
		},
		mounted() {
			// this.getAll();
			this.goPage(1);
		}
	}
</script>

<style>

</style>